.tabs {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  .tabs-nav {
    display: flex;
    flex-direction: column;
    .tabs-nav-list {
      display: flex;
      .tabs-nav-item {
        flex: 1 0 0;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        cursor: pointer;
        .roll-item {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          font-weight: 500;
          color: #999;
          svg {
            path {
              fill: #999;
            }
          }
        }
      }
      .tabs-nav-item-active {
        .roll-item {
          color: #333;
          svg {
            path {
              fill: #333;
            }
          }
        }
      }
    }
    .tabs-nav-line {
      height: 3px;
      background-color: #333;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      transition: all .3s;
      border-radius: 3px;
    }
  }
  .tabs-main {
    width: 100%;
    padding: 20px 0 0 0;
    overflow: hidden;
    .tabs-main-wrap {
      display: flex;
      flex-wrap: nowrap;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      transition: all .3s;
    }
    .tabs-content {
      width: 100%;
    }
  }
}